<template>
	<view class="comment">
		<view class="user">
			<u-avatar :src="info.user_info.avatar" size="88"></u-avatar>
			<view class="info">
				<view>{{ info.user_info.nickname }}</view>
				<view class="time">{{ vk.pubfn.timeFormat(info._add_time, "yyyy-MM-dd") }}</view>
			</view>
			<block v-for="a in info.stars">
				<image class="star" src="@/static/icon/star-1.png"></image>
			</block>
			<block v-for="b in 5 - info.stars">
				<image class="star" src="@/static/icon/star-2.png"></image>
			</block>
			<view class="stars_count">{{ info.stars }}分</view>
		</view>
		<view class="tips">
			<view class="tip" v-for="c in info.tags">{{ c }}</view>
		</view>
		<view class="text">{{ info.content }}</view>
		<view class="imgs">
			<image
				v-for="(d, index) in info.images"
				mode="aspectFill"
				class="img"
				:src="d"
				@tap="show(index)"
			></image>
		</view>
	</view>
</template>

<script>
var vk = uni.vk // vk依赖

export default {
	props: {
		info: Object
	},
	methods: {
		show(index) {
			uni.previewImage({ current: index, urls: this.info.images })
		}
	}
}
</script>

<style lang="scss" scoped>
.comment {
	padding: 30rpx 20rpx 20rpx;
	background-color: #fff;
}

.user {
	display: flex;
	align-items: center;
	.info {
		flex: 1;
		padding: 0 20rpx;
		font-size: 28rpx;
		font-weight: bold;
		.time {
			color: #999999;
			font-weight: normal;
			font-size: 24rpx;
			padding-top: 4rpx;
		}
	}
	.star {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}
	.stars_count {
		font-size: 24rpx;
		color: #ff8820;
	}
}

.tips {
	display: flex;
	flex-wrap: wrap;
	padding: 22rpx 0 0 10rpx;
	.tip {
		color: #3ab54a;
		font-size: 24rpx;
		padding: 4rpx 22rpx;
		border: 1rpx solid #3ab54a;
		border-radius: 25rpx;
		margin: 0 0 6rpx 14rpx;
	}
}

.text {
	color: #666666;
	font-size: 24rpx;
	line-height: 36rpx;
	padding: 6rpx 0 0 30rpx;
}

.imgs {
	display: flex;
	flex-wrap: wrap;
	padding: 12rpx 0 0 20rpx;
	.img {
		width: 214rpx;
		height: 214rpx;
		border-radius: 12rpx;
		background-color: #999999;
		margin: 0 0 12rpx 12rpx;
	}
}
</style>
